<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-21 09:50:52
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-01 16:40:47
-->
<template>
  <div class="auth-checker">
    <a-checkbox
      v-model:checked="state.checkAll"
      :indeterminate="state.indeterminate"
      @change="onCheckAllChange"
    >
      全选
    </a-checkbox>
    <a-divider />
    <a-checkbox-group v-model:value="state.checkedList" :options="options">
      <template #label="{ label }">
        <span>{{ label }}</span>
      </template>
    </a-checkbox-group>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch, onMounted } from "vue";
const props = defineProps({
  moduleArr: {
    type: Array,
    default: [],
  },
});
const options = [
  { label: "研学实践", value: "1" },
  { label: "积分竞赛", value: "2" },
  { label: "交流活动", value: "3" },
  { label: "主题活动", value: "4" },
  { label: "餐饮", value: "5" },
  { label: "进门", value: "6" },
  { label: "住宿", value: "7" },
];
const state = reactive({
  indeterminate: false,
  checkAll: false,
  checkedList: [],
});

const onCheckAllChange = (e: any) => {
  Object.assign(state, {
    checkedList: e.target.checked
      ? options.map((item) => {
          return item.value;
        })
      : [],
    indeterminate: false,
  });
};

watch(
  () => state.checkedList,
  (val) => {
    state.indeterminate = !!val.length && val.length < options.length;
    state.checkAll = val.length === options.length;
  }
);

onMounted(() => {
  Object.assign(state, {
    checkedList: props.moduleArr,
    indeterminate: false,
  });
});
defineExpose({
  state,
});
</script>
<style scoped>
.auth-checker {
  padding: 30px 0;
}
</style>
